<template>
  <view class="base-card" :class="[
    shadow ? `base-card--shadow-${shadow}` : '',
    { 'base-card--clickable': clickable },
    { 'base-card--full-width': fullWidth }
  ]">
    <view v-if="title || $slots.header" class="base-card__header">
      <slot name="header">
        <text class="base-card__title">{{ title }}</text>
      </slot>
    </view>
    <view class="base-card__content">
      <slot></slot>
    </view>
    <view v-if="$slots.footer" class="base-card__footer">
      <slot name="footer"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'BaseCard',
  props: {
    /**
     * 卡片标题
     */
    title: {
      type: String,
      default: ''
    },
    /**
     * 阴影级别：light, medium, dark
     */
    shadow: {
      type: String,
      default: 'light',
      validator: (value) => ['light', 'medium', 'dark', ''].includes(value)
    },
    /**
     * 是否可点击（添加点击效果）
     */
    clickable: {
      type: Boolean,
      default: false
    },
    /**
     * 是否占满宽度（无边距）
     */
    fullWidth: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./BaseCard.scss";
</style> 